body {
    background-color:#F9F9F9;
 
}
/* 登录 */

html,body {
    width:100%;
    height:100%;

}
#app{
    height:100%;
}
.login{
    width:100%;
    height:100%;
    background:url(../images/background2.jpg)no-repeat top center;
    background-size:cover;
    

}
.login-img{
    align:center;
}
.login-img img {
    width:150px;
}
.login-img{
    align:center;
}
.login-img img {
    width:150px;
}
/* 页面头部 */
.header {
    width:100%;
    position:fixed;
    top: 0;
    background-color: #fff;
    z-index :999;
    box-shadow: 0 1px 3px #ddd;
}
.appheader{
    display: flex;
    align-items: center;
    max-width:1380px;
    min-width:1000px;
    margin:auto;
}
/* //搜索 */
.header-item{
    display:flex;
}
.header-search{
    display: flex;
    max-width:450px;
    margin-right:15px;
    position: relative;
}
.header-search input {
    margin-left: -150px;
    width: 350px;
    height:20px;
    padding :4px 10px;
    border:1px solid #EBECED;
    background-color:#F8F8FA;
    border-radius :90px;
}
.header-search button{
    cursor: pointer;
    border:0;
    background:0;
    font-weight:600;
    color:#8693A6;
    position:absolute;
    right:10px; 
    top:5px;
 }
 .header-search el-button{
    position:absolute;
    right:5px;
 }
 /* 头像下拉菜单 */
 .header-profile{
    margin-left: 20px;
    width:300px;
    height:40px;
    cursor: pointer;
 }

 .avatar-custom{
    width: 50%;
    height: 50%;
 }

/* 左右的区域的样式 */
.card {
    background:#fff;
    border-radius:2px;
    box-shadow: 0 1px 3px #ddd;
    margin-bottom:10px;
    box-sizing:border-box;
    overflow:hidden;
}
/* 推荐 */
.Topstory-content{
    display:flex;
    flex-wrap:wrap;
}
.Topstory-content ul{
    padding:20px;
    width:100%;
}
.Topstory-content>ul>li{
    border-bottom:1px solid #eee;
    cursor:pointer;
}
/* 具体的展示页recommend/index.vue */
/* 首页-推荐页 */
.topstory-hd{
    display: flex;
    align-items:center;
    margin-bottom:5px;
}
.topstory-hd img {
    width:30px;
    height:30px;
    border-radius:2px;
}
.topstory-hd span{
    font-size:16px;
    font-weight:600px;
    margin-left:5px;
}
.topstory-title{
    font-size:16px;
    font-weight:600px;
    line-height:40px;
}
/* 多行省略样式 */
/* 详细内容 */
.topstory-article_item {
    /* 标准 + 前缀属性组合 */
   line-clamp: 2;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   /* 基础样式 */
   overflow: hidden;
   text-overflow: ellipsis;
     font-size:15px;
     line-height:26px;
 
 }
 
/* 小图标样式 */
.topstory-actions ul{
    display: flex;
    padding:20px 0;
}
.topstory-actions ul li{
    display:flex;
    align-items:center;
    margin-right:30px;
    color:#75849A;
    cursor:pointer;
}
.topstory-actions ul li i {
    margin-right:5px;
    
}
.topstory-actions .approve-like {
    color:red;
}
/* 右边栏的第一栏 */
.sidebar-creator {
    padding:20px;
}
.creatoe-hb {
    margin-top : -20px;

}
.creater-db{
    margin-left:-30px;

}
.creater-db ul{
    display:flex;
    justify-content: space-between;/* 两端对齐 */
    margin:20px 0;

}
.creater-db ul li {
    flex:0;
    text-align: center;
    display:flex;
    flex-direction:column;
    align-items: center;
    cursor:pointer;
}
.creater-db ul li i{
    display:block;
    font-size:28px;
    margin-bottom:22px;
    border-radius:50px;
    width:45px;
    /* height:40px */


}
.creater-db ul li p{
    font-size:15px;  
    margin-top:-20px   
}
/* 结构伪类选择器 */
.creater-db ul li:nth-child(1) i{
    background-color:#E0ECFF;
    color:#0066FF;
}
.creater-db ul li:nth-child(2) i{
    background-color:#fffbe1;
    color:#FFA830;
}
.creater-db ul li:nth-child(3) i{
    background-color:#ffe0f4;
    color:#ff0066;
}
.creator-fb {
    height:40px;
    border: 1px solid #0066FF;
    display: flex;
    align-items: center;
    cursor: pointer;
    

}
.creator-fb i{
    color:#0066FF;
    margin-left:70px;
}
.creator-fb span {
    text-align:center;
    color:#0066FF; 
}
/* 右边的二栏111111 */
.hot_list{
    display:flex;
    flex-wrap:wrap;
}
.hot_list ul{
    margin-top:-10px;
    margin-left:-10px;
    padding:20px;
    width:100%;
}
.hot_list>ul>li{
    border-bottom:1px solid #eee;
    cursor:pointer;
    padding:5px;
    display:flex;
}
.reator-hb i{
    color:#ff0066;
}
/* 火文内容 */
.hot_items {
    /* 标准 + 前缀属性组合 */
   line-clamp: 1;
   display: -webkit-box;
   -webkit-line-clamp: 1;
   -webkit-box-orient: vertical;
   /* 基础样式 */
   overflow: hidden;
   text-overflow: ellipsis;
     font-size:13px;
     line-height:20px;
 
 }
 .hot_num{
    font-size:10px;
    color:#8693A6
 }